<template>
  <!--  用户分析-->
  <a-card :bordered="false" class="user-analyse">
    <div class="table-page-search-wrapper">
      <a-row :gutter="48">
        <a-col :md="12" :sm="24">
          <a-input
            v-model="keyword"
            placeholder="请输入用户昵称"
            style="margin-right: 8px;margin-bottom: 24px;width: 200px;"/>
          <b-button type="primary" @click="$refs.table.refresh(true)" btnContent="查询"/>
        </a-col>
        <a-col :md="12">
          <div style="display: flex;justify-content: flex-end;align-items: center">
            <a :href="url">
              <b-button btn-content="数据导出"/>
            </a>
          </div>
        </a-col>
      </a-row>
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="nickname"
      :columns="columns"
      :data="loadData"
      :pageSize="10"
    >
      <span slot="headImgUrl" slot-scope="text, record">
        <img style="width: 40px;height:40px;border-radius:50%" :src="record.headImgUrl">
      </span>
      <span slot="friendCount" slot-scope="text, record">
        <div class="d-aic">
          <span>{{ record.friendCount }}</span> <span
            v-if="record.friendCount"
            class="ml-10 look_detail"
            @click="showDetail(record.id)">详情</span>
        </div>
      </span>
      <span slot="referrerLevel" slot-scope="text, record">
        {{ record.referrerLevel+1 }}
      </span>
      <span slot="level" slot-scope="text, record">
        {{ record.level?record.level:'暂未达成' }}
      </span>
      <span slot="isFriend" slot-scope="text, record">
        {{ record.isFriend?'是':'否' }}
      </span>
    </s-table>
    <a-modal
      class="tag-modal"
      v-model="helpDetail"
      title="用户助力明细"
      :footer="null"
      width="640px"
      @cancel="hideHelpDetail">
      <a-table
        rowKey="id"
        :columns="HelpDetailColumns"
        :data-source="HelpDetailList"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <span slot="inviteTime" slot-scope="text, record">
          {{ text+record }}
        </span>
        <span slot="headImgUrl" slot-scope="text, record">
          <img style="width: 40px;height:40px;border-radius:50%" :src="record.headImgUrl">
        </span>
        <span slot="inviteTime" slot-scope="text, record">
          {{ record.inviteTime?getTime(record.inviteTime):'' }}
        </span>
        <span slot="isFriend" slot-scope="text, record">
          {{ record.isFriend?'是':'否' }}
        </span>
      </a-table>
    </a-modal>
  </a-card>
</template>

<script>
  import { STable } from '@/components'
  import BButton from '@/perm/components/b-button'
  import API from '../../../../../api/gameData'
  import storage from 'store'
  import { ACCESS_TOKEN } from '../../../../../store/mutation-types'

  export default {
    name: 'UserAnalyse',
    components: {
      BButton,
      STable
    },
    data () {
      return {
        helpDetail: false,
        gamePlayId: null,
        HelpDetailList: [],
        pagination: {
          current: 1,
          total: 0,
          size: '10'
        },
        HelpDetailColumns: [
          {
            title: '编号',
            scopedSlots: { customRender: 'userId' }
          },
          {
            title: '用户头像',
            dataIndex: 'headImgUrl',
            scopedSlots: { customRender: 'headImgUrl' }
          },
          {
            title: '用户昵称',
            dataIndex: 'nickname'
          },
          {
            title: '邀请人数',
            dataIndex: 'friendCount'
          },
          {
            title: '邀请时间',
            dataIndex: 'inviteTime',
            scopedSlots: { customRender: 'inviteTime' }
          },
          {
            title: '是否好友',
            dataIndex: 'isFriend',
            scopedSlots: { customRender: 'isFriend' }
          }
        ],
        // 查询参数
        keyword: '',
        // 表头
        columns: [
          // {
          //   title: '编号',
          //   width: '300px',
          //   dataIndex: 'userId'
          // },
          {
            title: '头像',
            width: '100px',
            dataIndex: 'headImgUrl',
            scopedSlots: { customRender: 'headImgUrl' }
          },
          {
            title: '昵称',
              width: '100px',
            dataIndex: 'nickname'
          },
          {
            title: '用户级别',
              width: '100px',
            dataIndex: 'referrerLevel',
            scopedSlots: { customRender: 'referrerLevel' }
          },
          {
            title: '支持人数',
            width: '100px',
            dataIndex: 'friendCount',
            scopedSlots: { customRender: 'friendCount' }
          },
          {
            title: '历史最高支持人数',
              width: '100px',
            dataIndex: 'historyFriendCount'
          },
          {
            title: '达成阶梯等级',
            dataIndex: 'level',
              width: '100px',
            scopedSlots: { customRender: 'level' }
          },
          {
            title: '是否好友',
            dataIndex: 'isFriend',
              width: '100px',
            scopedSlots: { customRender: 'isFriend' }
          },
          {
            title: '渠道来源',
              width: '100px',
            dataIndex: 'channelName'
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          const qwUserId = this.$store.state.user.info.qwUserId || null
          const params = Object.assign({
            qwUserId: qwUserId,
            gameTaskId: this.$route.query.gameTaskId,
            size: parameter.pageSize
          }, { keyword: this.keyword })
          return API.userPage(Object.assign({
            current: parameter.pageNo,
            size: parameter.pageSize
          }, params))
            .then(res => {
              return {
                data: res.records,
                'pageSize': res.size,
                'pageNo': res.current,
                'totalCount': res.total
              }
            })
        },
        selectedRowKeys: [],
        selectedRows: [],
        // custom table alert & rowSelection
        options: {},
        url: null
      }
    },
    created () {
      this.options = {
        alert: {
          show: true,
          clear: () => {
            this.selectedRowKeys = []
          }
        },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      }
    },
    computed: {
      qwUserId () {
        return this.$store.state.user.info.qwUserId
      },
      gameTaskId () {
        return this.$route.query.gameTaskId
      }
    },
    mounted () {
      this.getUrl()
    },
    methods: {
      getTime (time) {
        return this.$Utils.getTimeFormat(time)
      },
      showDetail (gamePlayId) {
        this.gamePlayId = gamePlayId
        this.helpDetail = true
        this.getData()
      },
      handleTableChange (pagination) {
        this.pagination.current = pagination.current
        this.pagination.pageSize = pagination.pageSize
        this.getData()
      },
      getData () {
        API.mySharePage({
          gamePlayId: this.gamePlayId,
          size: this.pagination.size,
          current: this.pagination.current
        }).then(res => {
          this.HelpDetailList = res.records
          this.pagination.total = res.total
        })
      },
      hideHelpDetail () {
        this.helpDetail = false
        this.pagination.total = 0
        this.pagination.current = 1
        this.HelpDetailList = []
      },
      changeActive () {
        this.$refs.table.refresh(true)
      },
      /**
       *构建导出名单链接
       */
      getUrl () {
        const token = storage.get(ACCESS_TOKEN)
        this.url = 'qw/gameTaskData/export?qwUserId=' + this.qwUserId + '&gameTaskId=' + this.gameTaskId + '&access_token=' + token
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      activeChange (record) {
        if (!record.userId) {
          this.$message.error(`用户没有添加好友，无法开启排行榜`)
          return
        }
        API.updateShowRankList({
          userId: record.userId,
          qwUserId: this.qwUserId,
          show: record.showRankList ? 0 : 1
        }).then(res => {
          this.$refs.table.refresh(true)
          this.$message.success(`操作成功`)
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .user-analyse {
    .table-page-search-wrapper {
      position: relative;
      padding-bottom: 30px;
      border-bottom: 1px solid #D9D9D9;

      .update-desc-state {
        position: absolute;
        right: 0;
        bottom: 0;
        height: 30px;
        font-size: 12px;
        color: #52C41A;

        .desc-state-icon {
          margin-left: 8px;
          font-size: 20px;
          animation: animal 1.5s forwards infinite;
        }
      }
    }

    .look_detail {
      color: #de1f26 !important;
      font-size: 14px;
      display: block;
      cursor: pointer;
      padding: 5px 8px;
      border: 1px solid #de1f26;
      border-radius: 4px;
    }

    @-webkit-keyframes animal {
      0% {
        transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
      }
      100% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
      }

    }
  }

</style>
